<html lang="en-US">
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="icon.ico" type="image/x-icon">
<script async type="application/javascript" src="js/script.js"></script>
<meta name=viewport content="width=device-width, initial-scale=0.65, user-scalable=no">
<noscript>Javascript Needed For Page!</noscript>
</head>
<body onload="javascript:init();" id="body" style="opacity: 0;">

<canvas id="bg"></canvas>
<div class="center-flex offset-25">
<div class="container" id="mainContainer">
<div class="container container-search" id="searchContainer">
<input tabindex="1" type="text" id="searchBar"
               onfocus="javascript:addClass('mainContainer','input-active');"
               onblur="javascript:removeClass('mainContainer','input-active')"
               onkeydown="javascript:handleQuery(event,this.value);"></div>
<div class="container container-help" id="searchHelp">
<ul class="help-list" id="searchHelpMenu"></ul></div>
<div class="container container-menu" id="menuContainer">
<ul onclick="void(0);" class="menu-category" id="categoryMenu"></ul></div>
</div>
</div>
<div id="notesWidget" class="widget">
<div id="notesContainer" class="container-notes">
<div class="notes-icon">
<svg style="width:24px;height:24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" /></svg>
</div>
<textarea id="notesInput" tabindex="2"
                  onkeydown="javascript:handleNoteInput(event)"
                  onfocus="javascript:handleNotes(event,true)"
                  onblur="javascript:handleNotes(event,false)"></textarea></div></div>

<!-- A main menu deal for setting background color and other preferences -->
<div id="mainMenuWidget" class="widget" style="top:70px">
<div id="mainMenuContainer" class="container-mainmenu">
<div class="main-menu-icon">
<!-- <svg style="width:24px;height:24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" /></svg> -->
<!-- <img src="https://f.cl.ly/items/1U2c3b1215383h3a2T2r/icon-menu.svg"/> -->
<!-- <img src="images/menu.svg"/> -->

<svg><path d="M2 6h28v6h-28zM2 14h28v6h-28zM2 22h28v6h-28z"/></svg>

</div>

<!-- this is what makes the grey tab -->
<div id="mainMenuInput" tabindex="2"
                  onfocus="javascript:handleMenu(event, 'mainMenuContainer', true)"
                  onblur="javascript:handleMenu(event, 'mainMenuContainer', false)">
                  <ul style="overflow-wrap: break-word; width: 272px;" >
                  	<li><input placeholder="Background Color" class="main-menu-field" id="backgroundColor" type="text" onfocus="javascript:handleMenu(event, 'backgroundColor', true)" onblur="javascript:handleMenu(event, 'backgroundColor', false)"></input></li>
                  	<li><input placeholder="Container Color" class="main-menu-field" id="containerColor" type="text" onfocus="javascript:handleMenu(event, 'containerColor', true)" onblur="javascript:handleMenu(event, 'containerColor', false)"></input></li>
                  	<li><input placeholder="Font Color" class="main-menu-field" id="fontColor" type="text" onfocus="javascript:handleMenu(event, 'fontColor', true)" onblur="javascript:handleMenu(event, 'fontColor', false)"></input></li>
                  	<li><input placeholder="Search Assist Color" class="main-menu-field" id="searchAssistColor" type="text" onfocus="javascript:handleMenu(event, 'searchAssistColor', true)" onblur="javascript:handleMenu(event, 'searchAssistColor', false)"></input></li>
                    <li class='image'><p style="display: inline;" onclick="handleMenu(event, 'bgImage', true)">Background Image </p><p id="clearBgImage" style="display: inline;" onclick="clearBgImage();">(Clear)</p></li>
                  	<!-- <li>Search Assist Font Color<input class="main-menu-field" id="searchAssistFontColor" type="text" onfocus="javascript:handleMenu(event, 'searchAssistFontColor', true)" onblur="javascript:handleMenu(event, 'searchAssistFontColor', false)"></input></li>
                  	<li>Date and Time Color<input class="main-menu-field" id="dateFontColor" type="text" onfocus="javascript:handleMenu(event, 'dateFontColor', true)" onblur="javascript:handleMenu(event, 'dateFontColor', false)"></input></li> -->
                  </ul>
                  <a href="https://weboas.is/" class="credits">check out weboas.is</a>

</div>
</div>
</div>

<div id="contextMenu" class="context-menu">
  <ul class="context-items">
    <li class="context-menu__item">
      <a href="#" class="context-link">
        View Task
      </a>
    </li>
    <li class="context-menu__item">
      <a href="#" class="context-link">
        Edit Task
      </a>
    </li>
    <li class="context-menu__item">
      <a href="#" class="context-link">
        Delete Task
      </a>
    </li>
  </ul>
</div>

<input type="file" id="bgimgupload" accept="image/*" onchange="bgImageUpload();" /> 
<img id="backgroundImage" src=""/>

<div id="dateContainer" class="widget align-right"></div>
<div class="widget align-right2">
<script type="application/javascript">
  function getIP(json) {
    document.write(json.ip);
  }
</script>
<script type="application/javascript" data-cfasync="false" src="https://api.ipify.org?format=jsonp&callback=getIP"></script></div>
<script>
	
var s = window.screen;
var width = bg.width = s.width;
var height = bg.height = s.height;
var letters = Array(256).join(1).split('');

var draw = function () {
  bg.getContext('2d').fillStyle='rgba(0,0,0,.05)';
  bg.getContext('2d').fillRect(0,0,width,height);
  bg.getContext('2d').fillStyle='#0C82CF';
	bg.getContext('2d').font = 9 + "px arial";
  letters.map(function(y_pos, index){
    text = String.fromCharCode(64+Math.random()*33);
    x_pos = index * 10;
    bg.getContext('2d').fillText(text, x_pos, y_pos);
    letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;
  });
};
setInterval(draw, 33);
</script>

</body>
</html>
